<template>
	<view class="my-date-md">
		<u-popup
			v-model="mdstate"
			:mode="'center'"
			:border-radius="10"
			:mask-close-able="false"
		>
			<view class="sedate-md">
				<view class="top-btns">
					<view class="type-btn" @click="changeType">
						<view class="b-text">{{ setype == 'm' ? '按月查询' : '按日查询' }}</view>
						<u-icon name="/static/icons/change.png" size="30"></u-icon>
					</view>
					
					<view class="type-btn" :style="{'float': 'right'}" @click="currDate">
						<template v-if="setype == 'm'">
							<view class="b-text">本月</view>
							<u-icon name="/static/icons/curr-month.png" size="30"></u-icon>
						</template>
						<template v-else>
							<view class="b-text">今天</view>
							<u-icon name="/static/icons/curr-day.png" size="30"></u-icon>
						</template>
					</view>
				</view>
				
				<view class="date-sel" v-if="setype == 'm'">
					<view class="month-val"><view class="val-text">{{seval.sd.substring(0, 8)}}</view></view>
					
					<view class="sel-list">
						<picker-view 
							class="my-picker-view"
							:value="value" 
							@pickstart="okbtn.load = true" 
							@pickend="okbtn.load = false" 
							@change="changeMonthDate"
						>
						    <picker-view-column>
						        <view class="item" v-for="(it, index) in years" :key="index">{{it}}年</view>
						    </picker-view-column>
						    <picker-view-column>
						        <view class="item" v-for="(it, index) in months" :key="index">{{it}}月</view>
						    </picker-view-column>
						</picker-view>
					</view>
				</view>
				<view class="date-sel" v-else>
					<view class="month-val">
						<view class="val-text-day" :class="{'seled': selSe == 1}" @click="clickSelSe(1)">{{seval.sd}}</view> 
						至 
						<view class="val-text-day" :class="{'seled': selSe == 2}" @click="clickSelSe(2)">{{seval.ed}}</view>
					</view>
					
					<view class="sel-list">
						<picker-view 
							class="my-picker-view"
							:value="value" 
							@pickstart="okbtn.load = true" 
							@pickend="okbtn.load = false" 
							@change="changeMonthDate"
						>
						    <picker-view-column>
						        <view class="item" v-for="(it, index) in years" :key="index">{{it}}年</view>
						    </picker-view-column>
						    <picker-view-column>
						        <view class="item" v-for="(it, index) in months" :key="index">{{it}}月</view>
						    </picker-view-column>
						    <picker-view-column>
						        <view class="item" v-for="(it, index) in days" :key="index">{{it}}日</view>
						    </picker-view-column>
						</picker-view>
					</view>
				</view>
				
				<view class="btns">
					<u-button 
						:custom-style="cancelbtn.style" 
						:shape="'circle'" 
						:size="'mini'" 
						@click="closeMd"
					>取消</u-button>
					
					<u-button 
						:custom-style="okbtn.style" 
						:shape="'circle'" 
						:size="'mini'" 
						:loading="okbtn.load" 
						@click="onOk"
					>确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import U from '@/common/UT';
	
	export default {
		name:"my-date-md",
		props: {
			// 起止日期
			sedate: {
				type: Object,
				default: {st: '', et: ''}
			}
		},
		data() {
			let curDate = new Date();
			
			// 父级传入了值
			if(this.sedate.st) curDate = U.str2date(this.sedate.st);
			
			const years = [], months = [], days = [];
			// 初始化时间选择数据
			for (let i = 2000; i <= 2060; i++) {
			    years.push(i);
			}
			
			for (let i = 1; i <= 12; i++) {
			    months.push(i);
			}
			
			for (let i = 1; i <= 31; i++) {
			    days.push(i);
			}
			
			return {
				// 弹框显隐状态
				mdstate: true,
				// 日期类型 m-月份选择（默认） d-号数选择
				setype: 'm',
				// 当前选择的起止日期（如果只选择月份，则起是月第一天，止是月最后一天）
				seval: {sd: '', ed: ''},
				// 选择日期 1-开始 2-结束
				selSe: 1,
				
				// 取消按钮
				cancelbtn:{
					style: {
						'margin-right': '60rpx',
						'background': '#ffffff',
						'width': '120rpx',
						'color': '#00C3CE',
						'height': '56rpx',
						'line-height': '56rpx',
						'border-radius': '60rpx',
						'font-size': '26rpx',
						'display': 'inline-block'
					}
				},
				
				// 确定按钮
				okbtn: { 
					load: false, 
					text: '确定',
					style: {
						'background': '#00C3CE',
						'width': '120rpx',
						'color': '#ffffff',
						'height': '56rpx',
						'line-height': '56rpx',
						'border-radius': '60rpx',
						'font-size': '26rpx',
						'display': 'inline-block'
					}
				},
				
				years,
				months,
				days,
				// 当前选中的值
				value: [curDate.getFullYear() - 2000, curDate.getMonth(), curDate.getDate() - 1],
				
				// 最终的值
				finalVal: ''
			};
		},
		// watch: {
		// 	// 监听父级传入的事件
		// 	sedate: {
		// 		handler(o, c){
		// 			console.log('正在监听sedate参数', c);
		// 		},
		// 		deep: true // true=深度监听
		// 	}
		// },
		created(){
			let that = this, sd = that.sedate.st, ed = that.sedate.et;
			
			console.log('父级传入的默认起止日期2', this.sedate);
			
			// 设置默认值
			if(!sd || !ed){
				let curDate = new Date();
				
				let st = U.date2str(curDate), et = U.date2str(curDate);
				
				that.seval = {sd: U.datefmt(st, 'yyyy年MM月dd号'), ed: U.datefmt(et, 'yyyy年MM月dd号')};
				
				that.finalVal = {sd: U.datefmt(st, 'yyyy-MM-dd 00:00:00'), ed: U.datefmt(et, 'yyyy-MM-dd 23:59:59')};
			}else{
				that.seval = {sd: U.datefmt(sd, 'yyyy年MM月dd号'), ed: U.datefmt(ed, 'yyyy年MM月dd号')};
				
				that.finalVal = {sd: U.datefmt(sd, 'yyyy-MM-dd 00:00:00'), ed: U.datefmt(ed, 'yyyy-MM-dd 23:59:59')};
			}
			let timer = null 
			timer = setTimeout(()=>{
				this.setype = 'd'
				clearTimeout(timer)
			},300)
		},
		methods: {
			// 关闭弹框
			closeMd(){
				// 关闭弹框
				this.$emit('handEvent', {state: false});
			},
			// 切换日期类型
			changeType(){
				this.setype = this.setype == 'm' ? 'd' : 'm';
			},
			// 本月/今天
			currDate(){
				const that = this, date = new Date();;
				
				if(that.setype == 'm'){// 本月
					// 转换成日期类型
					let st = U.getMonthFirstDay(date, 1, 'yyyy-MM-dd');
					let et = U.getMonthLastDay(date, 1, 'yyyy-MM-dd');
					
					// 设置值
					that.seval = {
						sd: U.datefmt(st, 'yyyy年MM月dd号'), 
						ed: U.datefmt(et, 'yyyy年MM月dd号')
					};
								
					// 设置最终的值
					that.finalVal = {
						sd: U.datefmt(st, 'yyyy-MM-dd 00:00:00'),
						ed: U.datefmt(et, 'yyyy-MM-dd 23:59:59')
					};
					
					that.value = [date.getFullYear() - 2000, date.getMonth(), date.getDate() - 1];
				}else{// 今天
					// 转换成日期类型
					let ct = U.date2str(date, 'yyyy-MM-dd');
					
					// 设置值
					that.seval = {
						sd: U.datefmt(ct, 'yyyy年MM月dd号'), 
						ed: U.datefmt(ct, 'yyyy年MM月dd号')
					};
								
					// 设置最终的值
					that.finalVal = {
						sd: U.datefmt(ct, 'yyyy-MM-dd 00:00:00'),
						ed: U.datefmt(ct, 'yyyy-MM-dd 23:59:59')
					};
					
					that.value = [date.getFullYear() - 2000, date.getMonth(), date.getDate() - 1];
				}
			},
			// 选择起止日期
			clickSelSe(val){
				if(val == 1){
					// 选中开始日期
					
					// 设置选中值为：开始日期
					let date = U.str2date(this.finalVal.sd);
					this.value = [date.getFullYear() - 2000, date.getMonth(), date.getDate() - 1];
				}else{
					// 设置选中值为：结束日期
					let date = U.str2date(this.finalVal.ed);
					this.value = [date.getFullYear() - 2000, date.getMonth(), date.getDate() - 1];
				}
				this.selSe = val;
			},
			// 选择日期
			changeMonthDate (e) {
				let that = this;
				
			    const val = e.detail.value;
				
				// 重新设置一下值
				that.value = val;
				
				let year = 2000+val[0], month = val[1]+1;
				
				if(that.setype == 'm'){// 当前是：按月查询
					// 转换成日期类型
					let st = U.getMonthFirstDay(new Date(`${year}/${month}/1`), 1, 'yyyy-MM-dd');
					let et = U.getMonthLastDay(new Date(`${year}/${month}/1`), 1, 'yyyy-MM-dd');
					console.log('选中的值', val, st, et);
					
					// 设置值
					that.seval = {
						sd: U.datefmt(st, 'yyyy年MM月dd号'), 
						ed: U.datefmt(et, 'yyyy年MM月dd号')
					};
								
					// 设置最终的值
					that.finalVal = {
						sd: U.datefmt(st, 'yyyy-MM-dd 00:00:00'),
						ed: U.datefmt(et, 'yyyy-MM-dd 23:59:59')
					};
				}else{// 当前是：按日查询
					let day = val[2]+1;
					
					// 转换成日期类型
					let ct = U.date2str(new Date(`${year}/${month}/${day}`), 'yyyy-MM-dd');
					
					console.log('选中的值', val, ct);
					
					// 获取所选月份的最后一天
					let mLastDay = new Date(year, month, 0);
					// 重新设置当月的天数
					that.days = [];// 先清空
					for (let i = 1; i <= mLastDay.getDate(); i++) {
					    that.days.push(i);
					}
					console.log(`${month}月有${that.days.length}天`);
				
					if(that.selSe == 1){// 选择开始日期
						that.seval.sd = U.datefmt(ct, 'yyyy年MM月dd号');
						// 设置最终的值
						that.finalVal.sd = U.datefmt(ct, 'yyyy-MM-dd 00:00:00');
					}else{// 选择结束日期
						that.seval.ed = U.datefmt(ct, 'yyyy年MM月dd号');
						// 设置最终的值
						that.finalVal.ed = U.datefmt(ct, 'yyyy-MM-dd 23:59:59');
					}
				}
				
				console.log('最终的起止时间值', that.finalVal);
			},
			// 确定
			onOk(){
				let that = this;
				
				if(that.setype == 'm'){// 当前是：按月查询 需要将结束日期变为所选月份最后一天
					let et = U.getMonthLastDay(that.finalVal.ed, 1, 'yyyy-MM-dd');
							
					// 设置最终的值
					that.finalVal.ed = U.datefmt(et, 'yyyy-MM-dd 23:59:59');
				}
				
				this.$emit('handEvent', {state: false, data: this.finalVal});
			},
		},
	}
</script>

<style lang="less">
.my-date-md{
	.sedate-md{
		width: 500rpx;
		// height: 860rpx;
		padding: 20rpx 20rpx;
		
		.top-btns{
			text-align: left;
			
			.type-btn{
				position: relative;
				display: inline-block;
				padding: 0rpx 10rpx;
				background: #fff;
				border: 2rpx solid #00c3ce;
				border-radius: 60rpx;
				background: #00c3ce;
				
				.b-text{
					display: inline-block;
					color: #FFFFFF;
					font-size: 24rpx;
					vertical-align: 6rpx;
					margin-right: 6rpx;
				}
				
			}
		}
		
		// 取消/确认-按钮
		.btns{
			margin-top: 20rpx;
			text-align: center;
		}
		
		// 日期样式
		.date-sel{
			.month-val{
				text-align: center;
				margin-bottom: 20rpx;
				margin-top: 20rpx;
				
				.val-text{
					display: inline-block;
					border-bottom: 2rpx solid #00c3ce;
					padding-bottom: 4rpx;
					color: #00c3ce;
				}
				
				.val-text-day{
					display: inline-block;
					border-bottom: 2rpx solid #999;
					padding-bottom: 4rpx;
					color: #999;
				}
				
				.seled{
					border-bottom: 2rpx solid #00c3ce;
					color: #00c3ce;
				}
			}
			
			.my-picker-view{
				width: 450rpx;
				height: 600rpx;
			
				.item {
					align-items: center;
					justify-content: center;
					text-align: center;
				}
			}
		}
		
		
	}
}
</style>
